<template>
  <div class="input-block">
    <div class="tools">
      <div @click.stop="displayEmoji=!displayEmoji" title="表情" class="tool-item iconfont icon-biaoqing"></div>
      <Emoji v-if="displayEmoji" @enterEmoji="appendMessage"></Emoji>
      <div @click="chooseFile('imageFile')" title="发送图片" class="tool-item iconfont icon-tupian"></div>
      <input ref="imageFile" @change="sendImage" type="file" style="display: none"/>
      <!--      <div @click="chooseFile('videoFile')" title="发送视频" class="tool-item iconfont icon-shipin"></div>-->
      <!--      <input ref="videoFile" @change="sendVideo" accept=".png,.gif,.bmp,.jpg.jpeg" type="file" style="display: none" />-->
      <div @click="exchangePhone" title="交换电话" class="tool-item iconfont icon-dianhua"></div>
      <template v-if="identity==='1'">
        <div @click="resume(1)" title="发送简历" class="tool-item iconfont icon-jianli"></div>
      </template>
      <template v-if="identity==='2'">
        <div @click="resume(2)" title="获取简历" class="tool-item iconfont icon-jianli"></div>
        <div @click="interview" title="面试TA" class="tool-item iconfont icon-mianshixinxi-02"></div>
        <el-dialog title="约面试" v-if="dialogVisible[0]" :visible.sync="dialogVisible[0]" width="30%" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
          <CreateInterview ref="createInterview" :conversation="conversation" :phone="this.phone"></CreateInterview>
          <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="dialogVisible[0] = false">取 消</el-button>
            <el-button type="primary" class="primary" @click="$refs.createInterview.submit(dialogVisible)">发送面试邀请</el-button>
          </span>
        </el-dialog>
      </template>
    </div>
    <div class="input">
      <textarea @keydown.enter.prevent="keyDown" class="input-textarea" v-model="message" placeholder="回车发送，Ctrl+回车换行"></textarea>
      <div ref="sendBtn" @click="sendMessage" class="sendBtn">发送</div>
    </div>
  </div>
</template>

<script>
import Emoji from "@/pages/im/components/Message/Emoji";
import {checkFile} from "@/utils/file";
import {getPhoneByImUserID, getToAccount} from "@/utils/im";
import CreateInterview from "@/pages/im/components/Interview/CreateInterview";

export default {
  name: "MessageInput",
  components: {CreateInterview, Emoji},
  props: {
    conversation: {
      type: Object
    }
  },
  watch: {
    conversation: {
      immediate: true,
      deep: true,
      handler(val) {
        this.conversation = val
        this.toPhone = getPhoneByImUserID(getToAccount(this.conversation.conversationID, this.conversation.type))
      }
    }
  },
  data() {
    return {
      message: '',
      emptyTips: false,
      displayEmoji: false,
      identity: null,
      toPhone: null,//对方手机号码
      phone: null,//自己手机号码
      dialogVisible: {
        0:false
      },//约面试弹窗
    }
  },
  mounted() {
    this.identity = this.$store.getters.identity;
    this.phone = this.$store.getters.user.mobile;
  },
  methods: {
    //约面试
    interview() {
      this.dialogVisible[0]=true
    },
    //简历请求
    resume(type) {
      this.$confirm(`确定向对方${type === 1 ? '发送' : '获取'}简历吗？`, '提示').then(() => {
        const message = this.tim.createCustomMessage({
          to: getToAccount(this.conversation.conversationID, this.conversation.type),
          conversationType: this.conversation.type,
          payload: {
            data: type === 1 ? 'sendResume' : 'getResume',
            description: '',
            extension: JSON.stringify({agree: null})
          }
        })
        this.$sendTIMMessage(message);
      })

    },
    //交换电话请求
    exchangePhone() {
      this.$confirm('确定与对方交换电话号码吗？', '提示').then(() => {
        const message = this.tim.createCustomMessage({
          to: getToAccount(this.conversation.conversationID, this.conversation.type),
          conversationType: this.conversation.type,
          payload: {
            data: 'exchangePhone',
            description: '交换电话号',
            extension: JSON.stringify({phone: this.phone, agree: null})
          }
        })
        this.$sendTIMMessage(message);
      })
    },
    //发送图片消息
    sendImage() {
      const fileList = this.$refs.imageFile.files;
      if (checkFile(fileList, ['png', 'gif', 'bmp', 'jpg', 'jpeg'], 1024 * 1024 * 2, 1024 * 1024 * 2, 1)) {
        const file = fileList[0];
        const to = getToAccount(this.conversation.conversationID, this.conversation.type);
        const message = this.tim.createImageMessage({
          to,
          conversationType: this.conversation.type,
          payload: {
            file,
          }
        })
        this.$sendTIMMessage(message);
      }
    },
    //选择图片
    chooseFile(ref) {
      this.$refs[ref].dispatchEvent(new MouseEvent('click'))
    },
    //追加表情
    appendMessage(e) {
      this.message = this.message + e.detail.message;
    },
    //发送当前message中的文字
    sendMessage() {
      if (this.message.replace(/\s+/g, "") === '') {
        this.$message.error('发送内容不能为空哦');
        return;
      }
      const to = getToAccount(this.conversation.conversationID, this.conversation.type);
      const message = this.tim.createTextMessage({
        to,
        conversationType: this.conversation.type,
        payload: {
          text: this.message
        }
      });
      this.message = '';
      this.$sendTIMMessage(message);
    },
    $sendTIMMessage(message) {
      this.$bus.$emit('sendMessage', {
        detail: {
          message
        }
      });
      this.tim.sendMessage(message).then((res) => {
      }).catch((error) => {
        this.$message.error('消息发送失败');
      })
    },
    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 13) {
        this.message += '\n';
      } else {
        this.sendMessage();
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => {
        done();
      }).catch(_ => {
      });
    }
  },
  beforeMount() {
    window.document.addEventListener('click', () => {
      if (this.displayEmoji) {
        this.displayEmoji = false;
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener('click', function () {

    })
  }
}
</script>

<style lang="scss" scoped>
.input-block {
  width: 100%;
  height: 100%;
  border-top: 1px solid $midGray;

  .tools {
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 35px;
    position: relative;

    .tool-item {
      margin: 0 10px;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .input {
    width: 100%;
    height: calc(100% - 35px);
    position: relative;

    .input-textarea {
      width: 100%;
      height: calc(100% - 50px);
      resize: none;
      padding: 5px 10px;
      font-size: 18px;
    }

    .sendBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 75px;
      height: 30px;
      color: #fff;
      background: $orange;
      font-size: 14px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>
